<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table{
            margin: 50px auto;
            width: 500px;
        }
    </style>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr align="center">
                <td>1</td>
                <td>文渊</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr align="center">
                <td>2</td>
                <td>陈锦</td>
                <td>81</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <script>
        /* 渲染表格
            1. 编写静态页面
            2. 模拟数据
            3. 使用JS渲染数据
                重点:
                 3.1 遍历数组,获取数组里面的数据,遍历出来的结果是 一个一个的对象
                     每一个对象对应的就是一个tr
                     每一个对象当中的数据就是一个td
                 3.2 我们要想办将数据渲染出来(数据渲染视图)
        */


        var tbody = document.querySelector("tbody")
        //对象数组,我用这个数据模拟从服务器发送过来的数据
        var arr = [
            {id:1,name:"张三",age:18,gender:"男"},
            {id:3,name:"李四",age:19,gender:"男"},
            {id:5,name:"王五",age:20,gender:"男"},
            {id:7,name:"赵六",age:21,gender:"男"}
        ]

        //提出数据str
        var str = ""
        //1. 遍历数组
        arr.forEach(function(item){
            // console.log(item);四个 {id: 1, name: '张三', age: 18, gender: '男'}
            //那我们想要办法创建四个tr,每一个对象对应一个tr,数组的循环会循环四次,那么每循环一次要创建一个tr
            str += `
                <tr align="center">
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.age}</td>
                    <td>${item.gender}</td>
                </tr>
            `
        })
        /* 将数据扔到tbody当中 */
        tbody.innerHTML = str;
        console.log(str);
    </script>
</body>
</html>